let stateAll = false

//动态渲染购物车
function shoucart() {
    //本地存储
    let cartListStr = localStorage.getItem('CART-LIST')
    //变成字符串进行拼接或者数组
    let cartList = JSON.parse(cartListStr) || []
    //遍历拼接后的数据

    let trStr = cartList.map(item => {
        //返回模板字符串内容
        return `<tr>
                        <td><input index = '${item.id}'type="checkbox" name = "checkbox-top" ${item.state?'checked':''} ><img src="${item.picture}" alt="图片" /></td>
                        <td>${item.shop}</td>
                        <td>￥${item.price}元</td>
                        <td>
                            <input type="button" value="-" name="minus" index = '${item.id}'${item.putaway<=0?'disabled':''} >
                            <input type="text" value="${item.putaway}" name="amount" class="cart-text">
                            <input type="button" value="+" name="plus" index = '${item.id}'>
                        </td>
                        <td class="all-price">￥${(item.putaway*item.price).toFixed(2)}</td>
                        <td>
                            <a href="#" index = '${item.id}' name = "del">删除</a>
                        </td>
                    </tr>`
    }).join('') //字符串拼接

    let thStr = `<tr>
                    <th>全选<input type="checkbox" name = "checkbox-bttom"  ${stateAll?'checked':''}>商品图片</th>
                    <th>商品信息</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>单个商品总价</th>
                    <th>操作</th>
                </tr>`
    thStr += trStr
    const tableele = document.querySelector('table')
    tableele.innerHTML = thStr
    // subtraction()
    totalPrice()
}
subtraction()

function subtraction() {
    let biaoele = document.querySelector('table')
    biaoele.onclick = function (e) {
        e = e || window.event
        let target = e.target || e.srcElement
        let id = target.getAttribute('index')
        //获取到本地存储的值
        //数量加本地存储再取出
        if (target.getAttribute('name') == "plus") {
            let productList = JSON.parse(localStorage.getItem('CART-LIST'))
            let productjieshou = productList.find(item => item.id == id)
            productjieshou.putaway++
            localStorage.setItem('CART-LIST', JSON.stringify(productList))
            shoucart()
        }
        //本地存储再取出数量减
        if (target.getAttribute('name') == "minus") {
            let productList = JSON.parse(localStorage.getItem('CART-LIST'))
            let productjieshou = productList.find(item => item.id == id)
            productjieshou.putaway--
            localStorage.setItem('CART-LIST', JSON.stringify(productList))
            shoucart()
        }
        //删除键
        if (target.getAttribute('name') == "del") {
            let productList = JSON.parse(localStorage.getItem('CART-LIST'))
            let productjieshou = productList.findIndex(item => item.id == id)
            productList.splice(productjieshou, 1)
            localStorage.setItem('CART-LIST', JSON.stringify(productList))
            shoucart()
        }
        //全选框
        if (target.getAttribute('name') == "checkbox-bttom") {
            stateAll = !stateAll
            let productList = JSON.parse(localStorage.getItem('CART-LIST'))
            productList.forEach(item => {
                item.state = stateAll
            })
            localStorage.setItem('CART-LIST', JSON.stringify(productList))
            shoucart()
        }
        //单选框
        if (target.getAttribute('name') == "checkbox-top") {
            let productList = JSON.parse(localStorage.getItem('CART-LIST'))
            let productjieshou = productList.find(item => item.id == id)
            productjieshou.state = !productjieshou.state
            localStorage.setItem('CART-LIST', JSON.stringify(productList))
            let cartList = JSON.parse(localStorage.getItem('CART-LIST'))
            stateAll = cartList.every((item) => item.state == true)
            shoucart()
        }
    }

}

//计算总价
function totalPrice() {
    let newproductList = JSON.parse(localStorage.getItem('CART-LIST'))
    let ne = newproductList.filter((item) => item.state == true)
    let sum = ne.reduce((s, item) => {
        return s + item.putaway * item.price
    }, 0)

    let totalprice = document.querySelector('.total-price>span')
    totalprice.innerHTML = sum.toFixed(2)
}
shoucart()